<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔡洪超</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .ad{
            width: 150px;
            height: 200px;
            background: rgba(88,123,44,0.5);
            position: fixed;
            bottom:0;
            right:50px;
        }
        .clear{
            width: 10px;
            height: 10px;
            border:1px solid red;
            position:absolute;
            right:0;
            top:0;
            box-sizing: content-box;
            font-size:5px;
        }
        .box{
            width:50px;
            height: 50px;
            background: orange;
            margin:50px;
            float: left;
            font-size: 10px;
        }
    </style>
</head>
<body>
     <div class="ad">
        <span>balabala</span>
        <button class="clear">X</button>
    </div>

    <div class="box" data-box="这是第一个盒子">在一起看方便</div>
    <div class="box" data-box="这是第二个盒子">在一起看方便</div>
    <div class="box" data-box="这是第三个盒子">在一起看方便</div>
    <div class="box" data-box="这是第四个盒子">在一起看方便</div>
    <div class="box" data-box="这是第五个盒子">在一起看方便</div>
    <ul id="wrap"></ul>
</body>
</html>
<script>

//页面上的流氓广告功能
    // 页面打开在右下角有一个广告框
    // 点击关闭的时候可以关闭
    // 关闭一定时间以后自动还弹出来
    let ad = document.querySelector(".ad");
    let btn = document.querySelector(".clear");
    btn.onclick = function(){
        ad.style.display = "none";
        setTimeout(function(){
            ad.style.display = "block"
        },1000)
    }





 
//准备五个盒子，点击每一个盒子的时候，alert 显示出该盒子内对应的文字
    let box = document.querySelectorAll(".box");
    box.forEach(function(item){
        item.onclick = function(){
            alert(`data数据：${item.dataset.box}     文本内容：${item.innerText}`)
        }
    })






//课上讲的案例，每个案例「盲敲」一遍
//一：点击li弹出详细信息
let arr = [
  {name: 'Jack',age:28,detail:'你好，我是jack我爱好音乐'},
  {name: 'Rose',age: 20,detail: '你好，我是Rose我爱坦坦尼克号'},
  {name: 'Tom',age: 22,detail: '你好，我是Tom，我爱好老鼠与🐱'}
];
let wrap = document.querySelector("#wrap");
arr.map(function(item){
    wrap.innerHTML += `<li data-cil="${item.detail}"><span>姓名：</span><span>${item.name}</span></li>
            <li data-cil="${item.detail}"><span>年龄：</span><span>${item.age}</span></li>`
});
let li = document.querySelectorAll("li")
li.forEach(function(item){
    item.onclick = function(){
        alert(item.dataset.cil)
    }
})


</script>